import React, { useState } from "react";
import ContractStyle from "./contract.module.css";
import { Button, Table, Modal, Steps,message, theme } from "antd";
import Search from "antd/es/input/Search";
import { ReactComponent as ResIcon } from "../../../assets/icon/刷新.svg";
function ContractPages() {
  const colums = [
    {
      key: "1",
      dataIndex: "合同编号",
      title: "合同编号",
      align: "center",
    },
    {
      key: "2",
      dataIndex: "合同名称",
      title: "合同名称",
      align: "center",
    },
    {
      key: "3",
      dataIndex: "产品编码",
      title: "产品编码",
      align: "center",
    },
    {
      key: "4",
      dataIndex: "产品名称",
      title: "产品名称",
      align: "center",
    },
    {
      key: "5",
      dataIndex: "合同签订时间",
      title: "合同签订时间",
      align: "center",
    },
    {
      key: "6",
      dataIndex: "合同签订月份",
      title: "合同签订月份",
      align: "center",
    },
    {
      key: "7",
      dataIndex: "合同金额",
      title: "合同金额",
      align: "center",
    },
    {
      key: "8",
      dataIndex: "已执行金额",
      title: "已执行金额",
      align: "center",
    },
    {
      key: "9",
      dataIndex: "外包金额",
      title: "外包金额",
      align: "center",
    },
    {
      key: "10",
      dataIndex: "外包单位",
      title: "外包单位",
      align: "center",
    },
    {
      key: "11",
      dataIndex: "是否已打款给外包",
      title: "是否已打款给外包",
      align: "center",
    },
    {
      key: "12",
      dataIndex: "公司",
      title: "公司",
      align: "center",
    },
    {
      key: "13",
      dataIndex: "甲方单位",
      title: "甲方单位",
      align: "center",
    },
    {
      key: "14",
      dataIndex: "客户姓名",
      title: "客户姓名",
      align: "center",
    },
    {
      key: "15",
      dataIndex: "乙方单位",
      title: "乙方单位",
      align: "center",
    },
    {
      key: "16",
      dataIndex: "已开票金额",
      title: "已开票金额",
      align: "center",
    },
    {
      key: "17",
      dataIndex: "待开票金额",
      title: "待开票金额",
      align: "center",
    },
    {
      key: "18",
      dataIndex: "回款金额",
      title: "回款金额",
      align: "center",
    },
    {
      key: "19",
      dataIndex: "开票待回款金额",
      title: "开票待回款金额",
      align: "center",
    },
  ];
  const onSearch = (value, _e, info) => console.log(info?.source, value);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <div className={ContractStyle.Contract_app}>
      <Modal
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={false}
        width={800}
      >
1
      </Modal>
      <div className={ContractStyle.Contract_Table_form}>
        <Search
          placeholder="input search text"
          onSearch={onSearch}
          style={{
            width: 200,
            marginRight: "10px",
          }}
        />
        <Button style={{ marginRight: "10px" }} onClick={showModal}>
          新增
        </Button>
        <Button style={{ display: "flex", alignItems: "center" }}>
          <ResIcon width={25} />
          <span style={{ margin: "0 5px" }}>重置</span>
        </Button>
      </div>
      <Table columns={colums} bordered="true" scroll={{ x: 2000 }} />
    </div>
  );
}

export default ContractPages;
